<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ModelCalculation</title>
    <link href="../css/layui.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/messageComputing.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <a href="../index.html"><img src="../images/logo.png" id="logo"/></a>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>
    </div>
</div>
<div class="main-container" id="box">
    <div class="main-box content-box">
        <div class="tip-box body-box">
            <div class="tip-title">
                <label>Newly Build</label>
                <input type="text" class="film-name" placeholder="Input Film Name">
                <span class="run" @click="runStep()"><i class="icon-run"></i><label>Next</label></span>
            </div>
            <div class="tip-body">
                <div class="layui-row">
                    <div class="layui-col-md6 model-padding">
                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Model Selection</label>
                            </div>
                            <div class="factor-content">
                                <select class="select-item" style="width: 100%" id="selectArray1">
                                    <option value="Regression">Regression</option>
                                    <option value="Clustering">Clustering</option>
                                    <option value="Classifiction">Classifiction</option>
                                    <option value="Evaluation">Evaluation</option>
                                    <option value="Online learing">Online learing</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 model-padding">
                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Classification Model Performance Visualization</label>
                            </div>
                            <div class="factor-content">
                                <select class="select-item" style="width: 100%">
                                    <option value="">ROC</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-md6 model-padding">
                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Algorithm Selection</label>
                            </div>
                            <div class="factor-content">
                                <div class="span-item" id="selection">
                                    <span v-for="item in selectOption">{{item}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Time Slot</label>
                            </div>
                            <div class="factor-content">
                                <input type="text" class="input-time" style="width:45.3%" id="time1">
                                <input type="text" class="input-time" style="width:45.3%" id="time2">
                            </div>
                        </div>

                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Predicted Days</label>
                            </div>
                            <div class="factor-content">
                                <input type="text" class="input-time" style="width:45.3%" id="time3">
                                <input type="text" class="input-time" style="width:45.3%" id="time4">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 model-padding">
                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Selection Index</label>
                            </div>
                            <div class="factor-content">
                                <select class="select-item" style="width: 100%">
                                    <option value="">Ready-to-use-Data</option>
                                </select>

                                <div class="span-item span-top">
                                    <span>Transaction Amount</span>
                                    <span class="span-checked">Rise And Fall</span>
                                    <span>Amplitude</span>
                                    <span>Increase</span>
                                    <span>PSYMA</span>
                                    <span>Minimum Price</span>
                                    <span>D-line</span>
                                    <span class="span-checked">Rising Days In Cycles</span>
                                    <span>Psychological Line</span>
                                    <span>The Highest Price</span>
                                    <span>K-line</span>
                                    <span>RSV</span>
                                </div>
                            </div>
                        </div>

                        <div class="factor-item">
                            <div class="asset-class factor-title">
                                <label>Prediction And Evaluation</label>
                            </div>
                            <div class="factor-content">
                                <div class="span-item">
                                    <span class="span-checked">Correlation Coefficien</span>
                                    <span>R Squared</span>
                                    <span>Adjusted R Squared</span>
                                    <span>MSE</span>
                                    <span>RMSE</span>
                                    <span>MAE</span>
                                    <span>RAE</span>
                                    <span>Retentuin Method</span>
                                    <span>Cross Validation</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-md12 model-padding">
                        <div class="factor-item model-bottom">
                            <div class="asset-class factor-title">
                                <label>Factor</label>
                                <div class="search-div">
                                    <input placeholder="Search" class="search-input"/>
                                    <i class="fa fa-search search-i" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="factor-content">
                                <div>
                                    <div class="model-title">
                                        <label>Stock Index</label>
                                    </div>
                                    <div class="span-item title-border">
                                        <span>All</span>
                                        <span>MA5</span>
                                        <span>MA10</span>
                                        <span>MA20</span>
                                        <span>MA50</span>
                                        <span>MA100</span>
                                        <span>MA200</span>
                                        <span class="span-checked">PSY</span>
                                        <span>Blas</span>
                                        <span class="span-checked">J</span>
                                        <span>A(5)</span>
                                        <span>A(5)+B(5)</span>
                                        <span>RSI(N)</span>
                                        <span>TP(5)</span>
                                        <span>MA-Closing price</span>
                                        <span>MD(5)</span>
                                        <span>CCI (5day)</span>
                                        <span>TR</span>
                                        <span>True fluctuation (ATR(14))</span>
                                        <span class="span-checked">Highs/Lows</span>
                                        <span>EMA(12)</span>
                                        <span>EMA(26)</span>
                                        <span>DIF</span>
                                        <span>MACD(12,26)</span>
                                        <span>Highest</span>
                                        <span>Lowest</span>
                                        <span>Rise and fall</span>
                                        <span>Rise</span>
                                        <span>RSV(9)</span>
                                        <span>K</span>
                                        <span>D</span>
                                        <span>Total Hands</span>
                                        <span>Amount of money</span>
                                        <span>PSYMA</span>
                                        <span>Amplitude</span>
                                    </div>
                                </div>

                                <div>
                                    <div class="model-title">
                                        <label>Market Psych</label>
                                    </div>
                                    <div class="span-item title-border">
                                        <span class="span-checked">All</span>
                                        <span class="span-checked">Fear</span>
                                        <span class="span-checked">Sentiment</span>
                                        <span class="span-checked">Policy Factor</span>
                                        <span class="span-checked">Reconstruction Index</span>
                                        <span class="span-checked">Fringe Market</span>
                                    </div>
                                </div>

                                <div>
                                    <div class="model-title">
                                        <label>Macro Economy</label>
                                    </div>
                                    <div class="span-item title-border" id="allCheck">
                                        <span>All</span>
                                        <span>Unemployment Rate</span>
                                        <span>Interest Rate</span>
                                        <span>Exchange Rate</span>
                                        <span>Deposit Reserve Ratio</span>
                                        <span>Shibor</span>
                                        <span>Dollar Index</span>
                                        <span>Resident Engel Coefficient</span>
                                        <span>Industrial Added Value</span>
                                        <span>Year-on-year Growth Rate Of Money Supply M2</span>
                                        <span>M2 Year-on-year Growth Rate</span>
                                        <span>Currency Circulation Speed</span>
                                        <span>PMI</span>
                                        <span>Consumer Satisfaction Index</span>
                                        <span>Consumer Expectations Index</span>
                                        <span>Business Outlook Gas Index</span>
                                        <span>Entrepreneur Confidence Index</span>
                                        <span>Industrial Confidence Index</span>
                                        <span>Purchasing Manager Index</span>
                                        <span>CPI</span>
                                        <span>M4 Money Supply</span>
                                        <span>Core PCE Price Index</span>
                                        <span>Dallas Fed PCE Index</span>
                                        <span>Manufacturing Confidence Index</span>
                                        <span>Generalized Currency</span>
                                        <span>Industrial Prospect Index</span>
                                        <span>Foreign Exchange Reserve</span>
                                        <span>PPI</span>
                                        <span>FDI Growth</span>
                                        <span>Business Confidence Index</span>
                                        <span>Manufacturing Enterprise Confidence Index</span>
                                        <span>Business Prosperity Index</span>
                                        <span>Economic Prosperity Index</span>
                                        <span>Industrial Prosperity Index</span>
                                        <span>Walter Prosperity IndexT</span>
                                        <span>Consumer Inflation Expectation Index</span>
                                        <span>Producer Inflation Expectation Index</span>
                                        <span>Economic Confidence Index</span>
                                        <span>Personal Consumption Index</span>
                                        <span>Consumer Price Index</span>
                                        <span>GDP</span>
                                        <span>Economic Growth Rate</span>
                                        <span>Inflation Rate</span>
                                        <span>Deflation Rate</span>
                                        <span>Business Expectation</span>
                                        <span>Private Investment Index</span>
                                        <span>Foreign Exchange Flow</span>
                                        <span>Merchandise Trade Balance</span>
                                        <span>International Trade Balance</span>
                                        <span>Investor Confidence Index</span>
                                        <span>Employment Trend Index</span>
                                        <span>Asset Reorganization And Acquisition</span>
                                        <span>Net Asset</span>
                                        <span>Net Asset Per Share</span>
                                        <span>Ownership Capital Ratio</span>
                                        <span>Dow Jones Industrial Average</span>
                                        <span>EUR/USD</span>
                                        <span>CHY/USD</span>
                                    </div>
                                    <div>
                                        <div class="model-title">
                                            <label>Other Markets</label>
                                        </div>
                                        <div class="span-item">
                                            <span>All</span>
                                            <span>Oil Price</span>
                                            <span class="span-checked">Gold Price</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row" id="two-button">
            <div class="layui-col-md12 factor-padding-right">
                <span class="run" @click="runBack()"><i class="icon-runBack"></i><label>Back</label></span>
                <a href="../file/SSE-R.xlsx">
                    <span class="download"><i class="icon-download"></i><label>Download</label></span>
                </a>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/vue.min.js"></script>
<script>
    localStorage.setItem("name2",$("#selectArray1").val().substring(0,1));
    var selectArray1 = ["Linear Regression","Nonlinear Refression","Iasso","Ridge","SVM","Stepwise","Random Forest","GBDT","Cart"];
    var selectArray2 = ["KMeans","KModes","DBSCan","PIC","C4.5","AGNES"];

    layui.use(['element', 'form', 'laydate'], function () {
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#time1',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '01 02,2008',
            showBottom: false
        });

        laydate.render({
            elem: '#time2',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '01 06,2019',
            showBottom: false
        });

        laydate.render({
            elem: '#time3',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '01 07,2019',
            showBottom: false
        });

        laydate.render({
            elem: '#time4',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '01 09,2019',
            showBottom: false
        });
    });

    var mainVue = new Vue({
        el: '#box',
        data: {
            selectOption:[]
        },
        mounted: function () {
            this.selectOption = selectArray1;
        },
        methods: {
            runStep: function () {
                window.location.href = "result.html";
            },
            runBack: function () {
                window.location.href = "messageComputing.html";
            }
        }
    });

    $(function () {
        $(".span-item span").click(function () {
            if ($(this).html() == "All") {
                if ($(this).attr("class") == "span-checked") {
                    $(this).parent(".span-item").children("span").removeClass("span-checked");
                } else {
                    $(this).parent(".span-item").children("span").addClass("span-checked");
                }
                return false;
            }
            if ($(this).attr("class") == "span-checked") {
                $(this).removeClass("span-checked");
            } else {
                $(this).addClass("span-checked");
            }

        });

        $("#selectArray1").change(function(){
            if($("#selectArray1").val()=="Clustering"){
                $("#selection span").removeClass("span-checked");
                mainVue.selectOption = selectArray2;
            }else{
                $("#selection span").removeClass("span-checked");
                mainVue.selectOption = selectArray1;
            }

            localStorage.setItem("name2",$("#selectArray1").val().substring(0,1));
        });

        $("#allCheck span").addClass("span-checked");
    });
</script>
</body>
</html>